<template>
    <div>
        <head-bar middleText="药械圈" :leftClick="returnPage" height="80"></head-bar>

        <div class="cell cell-bottom-border">
            <div class="cell-label">
                <text class="text-notmal label-title"> 订单号</text>
            </div>
            <div class="cell-content">
                <input style="width: 420px;height: 90px;"  class="text-minor" placeholder="请输入订单号" v-model="searchForm.orderNo"/></div>
        </div>

        <div class="cell cell-bottom-border">
            <div class="cell-label">
                <text class="text-notmal label-title"> 供应商</text>
            </div>
            <div class="cell-content">
                <input style="width: 420px;height: 90px;"class="text-minor" placeholder="请输入供应商名称" v-model="searchForm.companyName"/></div>
        </div>
        <!--<cell-select :selectData="orderTypes" @getVal="getOrderType" title="订单类型"></cell-select>-->
        <cell-select :selectData="orderStats" @getVal="getOrderStat" title="订单状态"></cell-select>
        <cell-date  title="更新时间起" @getVal="getUpdateDateStartVal"></cell-date>
        <cell-date  title="更新时间止" @getVal="getUpdateDateEndVal"></cell-date>
        <cell-date  title="下单时间起" @getVal="getOrderTimeStartVal"></cell-date>
        <cell-date  title="下单时间止" @getVal="getOrderTimeEndVal"></cell-date>


        <div class="submit-area" @click="submitSearchForm">
            <text class="submit-btn">确定</text>
        </div>
    </div>
</template>


<!--全局通用样式-->
<style>

    .text-minor {
        font-size: 30px;
        color: #c4c4c4;
    }

    .text-gray {
        font-size: 30px;
        color: #878787;
    }

    .text-notmal {
        font-size: 30px;
        color: #272727;
    }

    .text-important {
        font-size: 30px;
        color: #000000;
        font-weight: 800;
    }

    .text-success {
        font-size: 30px;
        color: #01a65a;
    }


</style>

<style>

    .submit-area {
        margin-top: 10px;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 0;
        width: 750px;
        height: 90px;
        background-color: #01A65A;
    }

    .submit-btn {
        font-size: 30px;
        color: white;
    }


    .container {
        flex-direction: column;
        background-color: #F6F6F6;
    }

    .content {
        width: 750px;
        height: 200px;
        padding-left: 20px;
        font-size: 30px;
        padding-top: 15px;
    }

    .follow-content {
        background-color: white;
        padding-top: 36px;
    }

    .content-label {
        flex-direction: row;
        padding-left: 15px;
        width: 750px;
    }

    .content-label-tag {
        font-size: 32px;
        color: #ff5d54;
    }

    .content-label-t {
        font-size: 32px;
        color: #272727;
    }

    .image-area {
        justify-content: flex-start;
    }

    .image-panel {
        width: 150px;
        height: 150px;
        border-width: 1px;
        border-color: #d1d1d1;
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .image-i {
        width: 150px;
        height: 150px;
    }

    .cell {
        width: 750px;
        height: 90px;
        padding-left: 15px;
        padding-right: 15px;
        flex-direction: row;
        background-color: white;
    }

    .cell-label {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 300px;
    }

    .cell-content {
        justify-content: center;
        align-items: flex-end;
        width: 420px;
    }

    .cell-top-border {
        border-top-color: #e2e2e2;
        border-top-width: 1px;
    }

    .cell-bottom-border {
        border-bottom-color: #e2e2e2;
        border-bottom-width: 1px;
    }


</style>

<script>
    import headBar from '../components/headBar.vue'
    import cellSelect from '../components/cellSelect.vue'
    import cellDate from '../components/cellDate.vue'
    import nw from '../network/nw.js'
    import cellInput from '../components/cellInput.vue'
    const nav = weex.requireModule('navigator')
    var param = nav.param()

    export default {
        components: {headBar,cellInput,cellSelect,cellDate},
        data:()=>({
            searchForm:{
                orderNo:'',
                companyName:''
            },
            orderTypes:[
                {name:'完整订单',value:1000},
                {name:'专供订单',value:1100},
                {name:'线下订单',value:1200},
            ],
            orderStats:[
                {name:'待接单',value:1200},
                {name:'待确认',value:1300},
                {name:'待付款',value:1400},
                {name:'待发货',value:1500},
                {name:'待收货',value:1600},
                {name:'已完成',value:1700},
                {name:'已作废',value:1800},
            ]
        }),
        methods:{
            //返回上个页面
            returnPage() {
                nav.back()
            },

            //订单类型
            getOrderType(data){
//                this.searchForm.orderStatus = data[0]
            },

            //订单状态
            getOrderStat(data){
                this.searchForm.orderStatus = data[0]
            },

            //更新时间开始
            getUpdateDateStartVal(data){
                this.searchForm.orderUpdateTimeStart = data
            },

            //更新时间结束
            getUpdateDateEndVal(data){
                this.searchForm.orderUpdateTimeEnd = data
            },

            //下单开始时间
            getOrderTimeStartVal(data){
                this.searchForm.orderTimeStart = data
            },
            //下单结束时间
            getOrderTimeEndVal(data){
                this.searchForm.orderTimeEnd = data
            },
            //搜索订单
            submitSearchForm(){
                nav.backFull(this.searchForm,false)
            }
        }
    }

</script>